<!doctype html>
<html lang="zh">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>预制菜溯源系统</title>
      <link rel="stylesheet" href="../static/css/style.css">
       <style>
           body {
               font-family: 宋体;
               background-color: #f8f9fa;
               margin: 0;
               padding: 0;
           }
           .hide {
       display: none;
   }
           .show{
               display: block;
           }


           .container {
               max-width: 1200px;
               margin: 30px auto;
               padding: 30px;
               background-color: #ffffff;
               border-radius: 15px;
               box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
           }

           header {
               text-align: center;
               margin-bottom: 40px;
               position: relative;
           }

           h1 {
               color: #2c3e50;
               font-size: 2.5em;
               font-weight: 600;
               margin-bottom: 20px;
               position: relative;
           }

           h1:after {
               content: '';
               display: block;
               width: 60px;
               height: 3px;
               background: linear-gradient(90deg, #00c6fb 0%, #005bea 100%);
               margin: 15px auto;
           }

           .input-area {
               display: flex;
               justify-content: center;
               margin: 40px auto;
               max-width: 800px;
               gap: 15px;
           }

           input[type="text"] {
               padding: 15px 20px;
               border: 2px solid #e0e0e0;
               border-radius: 8px;
               flex: 1;
               font-size: 16px;
               transition: all 0.3s ease;
           }

           input[type="text"]:focus {
               border-color: #00c6fb;
               box-shadow: 0 0 10px rgba(0, 198, 251, 0.2);
               outline: none;
           }

           button {
               padding: 15px 30px;
               border: none;
               border-radius: 8px;
               background: linear-gradient(135deg, #00c6fb 0%, #005bea 100%);
               color: white;
               font-size: 16px;
               font-weight: 500;
               cursor: pointer;
               transition: all 0.3s ease;
           }

           button:hover {
               background: linear-gradient(135deg, #005bea 0%, #00c6fb 100%);
               transform: translateY(-2px);
               box-shadow: 0 5px 15px rgba(0, 198, 251, 0.3);
           }

           .result-area {
               margin-top: 40px;
               opacity: 0;
               transform: translateY(20px);
               transition: all 0.5s ease;
           }

           .result-area.show {
               opacity: 1;
               transform: translateY(0);
           }

           h3 {
               color: #2d3748;
               font-size: 1.5em;
               margin: 30px 0 20px;
               padding-left: 15px;
               border-left: 4px solid #00c6fb;
           }

           table {
               width: 100%;
               border-collapse: separate;
               border-spacing: 0;
               margin: 25px 0;
               background: #fff;
               border-radius: 10px;
               overflow: hidden;
               box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
           }

           table th, table td {
               padding: 15px;
               text-align: left;
               border-bottom: 1px solid #eee;
               color: #2c3e50;
           }

           table th {
               background: linear-gradient(135deg, #f6f8fc 0%, #e9f0f9 100%);
               color: #2d3748;
               font-weight: 600;
               border-bottom: 2px solid #edf2f7;
           }

           table tr:hover {
               background-color: #f8faff;
           }

           /* 添加动画效果 */
           @keyframes fadeIn {
               from { opacity: 0; transform: translateY(20px); }
               to { opacity: 1; transform: translateY(0); }
           }

           .animate-in {
               animation: fadeIn 0.5s ease forwards;
           }

           /* 添加二维码图片容器样式 */
           #result-area2 {
               text-align: center;
               margin: 20px auto;
               max-width: 300px; /* 控制容器最大宽度 */
           }

           /* 添加二维码图片样式 */
           #qrcode-image {
               max-width: 300px; /* 控制图片最大宽度 */
               height: auto;
               display: block;
               margin: 0 auto;
               border-radius: 10px; /* 可选：添加圆角 */
               box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */
           }
       </style>
   </head>
     <body>
<div id="loading"><div id="loading-center"></div></div>
      <div class="wrapper">
         <div class="iq-sidebar">
            <div class="iq-sidebar-logo d-flex justify-content-between">
               <a href="{{url_for('index')}}">
               <img src="../static/images/logo.png" class="img-fluid" alt="">
               <span>预制菜溯源系统</span>
               </a>
            </div>
            <div id="sidebar-scrollbar">
               <nav class="iq-sidebar-menu">
                  <ul class="iq-menu">

                     <li >
                        <a href="{{url_for('index')}}" class="iq-waves-effect"><i class="ri-home-4-fill"></i><span>首页</span></a>
                     </li>
                     <li class="active">
                        <a href="{{url_for('trace_select')}}" class="iq-waves-effect"><i class="ri-search-2-line"></i><span>溯源查询</span></a>
                     </li>
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-shield-user-fill"></i><span>个人中心 </span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('change_form')}}">资料编辑</a></li>
                              <li><a href="{{url_for('change_passwd')}}">修改密码</a></li>
                        </ul>
                     </li>

                     {% if user and user.role == 'admin' %}
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-user-settings-fill"></i>用户管理</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('my_user')}}">我的用户</a></li>
                              <li><a href="{{url_for('add_user')}}">添加用户</a></li>
                        </ul>
                     </li>
                     {% endif %}

                     {% if user and (user.role == 'admin' or user.role == 'transporter') %}
                     <li>
                        <a href="javascript:void(0);" class="iq-waves-effect"><i class="ri-todo-fill"></i>运输管理</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('transport_test')}}">运输信息管理</a></li>
                              <li><a href="{{url_for('transport_show')}}">运输路线管理</a></li>
                        </ul>
                     </li>
                     {% endif %}

                     {% if user and user.role == 'admin' %}
                     <li>
                        <a href="{{url_for('product_manage')}}" class="iq-waves-effect"><i class="ri-file-edit-fill"></i><span>合约管理</span></a>
                     </li>
                     {% endif %}

                     {% if user and (user.role == 'admin' or user.role == 'producer') %}
                     <li>
                        <a href="javascript:void(0);"><i class="ri-stack-fill"></i>产品信息录入</span><i class="ri-arrow-right-s-line iq-arrow-right"></i></a>
                        <ul class="iq-submenu">
                              <li><a href="{{url_for('raw_material')}}">原材料录入</a></li>
                              <li><a href="{{url_for('production_record')}}">生产记录创建</a></li>
                              <li><a href="{{url_for('product_generation')}}">产品生成</a></li>
                        </ul>
                     </li>
                     {% endif %}
                  </ul>
               </nav>
               <div class="p-3"></div>
            </div>
         </div>
         <!-- Page Content  -->
         <div id="content-page" class="content-page">
            <!-- TOP Nav Bar -->
         <div class="iq-top-navbar">
            <div class="iq-navbar-custom">

               <nav class="navbar navbar-expand-lg navbar-light p-0">
                  <div class="iq-search-bar">
                     <form action="#" class="searchbox">
                        <input type="text" class="text search-input" placeholder="请输入搜索内容...">
                        <a class="search-link" href="#"><i class="ri-search-line"></i></a>
                     </form>
                  </div>
                  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <i class="ri-menu-3-line"></i>
                  </button>
                  <div class="iq-menu-bt align-self-center">
                     <div class="wrapper-menu">
                        <div class="main-circle"><i class="ri-more-fill"></i></div>
                           <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                     </div>
                  </div>
                  <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav ml-auto navbar-list">

                        <li>
                           <a href="{{url_for('AI')}}">AI对话</a>
                        </li>

                        <li class="nav-item">
                           <a href="#" class="search-toggle iq-waves-effect">
                                 <i class="ri-notification-3-fill"></i>
                                 <span class="bg-danger dots"></span>
                              </a>
                           <div class="iq-sub-dropdown">
                              <div class="iq-card shadow-none m-0">
                                 <div class="iq-card-body p-0 ">
                                    <div class="bg-primary p-3">
                                       <h5 class="mb-0 text-white">所有通知<small class="badge  badge-light float-right pt-1">4</small></h5>
                                    </div>

                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="../static/images/user/01.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">艾玛·沃森·比尼。</h6>
                                             <small class="float-right font-size-12">刚刚</small>
                                             <p class="mb-0">消息</p>
                                          </div>
                                       </div>
                                    </a>
                                    <a href="#" class="iq-sub-card" >
                                       <div class="media align-items-center">
                                          <div class="">
                                             <img class="avatar-40 rounded" src="../static/images/user/02.jpg" alt="">
                                          </div>
                                          <div class="media-body ml-3">
                                             <h6 class="mb-0 ">新客户加入</h6>
                                             <small class="float-right font-size-12">5天前</small>
                                             <p class="mb-0">系统管理员</p>
                                          </div>
                                       </div>
                                    </a>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
                  <ul class="navbar-list">
                     <li>
                        <a href="#" class="search-toggle iq-waves-effect d-flex align-items-center">
                           <img src="..//static/images/user1.jpg" class="img-fluid rounded mr-3" alt="user">
                           <div class="caption">
                              {% if user %}
                                  <h6 class="mb-0 line-height">{{ user.username }}</h6>
                                  <span class="font-size-12">{{ user.role }}</span>
                              {% else %}
                                  <h6 class="mb-0 line-height">未登录</h6>
                                  <span class="font-size-12">游客</span>
                              {% endif %}
                           </div>
                        </a>
                        <div class="iq-sub-dropdown iq-user-dropdown">
                           <div class="iq-card shadow-none m-0">
                              <div class="iq-card-body p-0 ">
                                 <div class="bg-primary p-3">
                                    <h5 class="mb-0 text-white line-height">你好-{{ user.username }}</h5>
                                 </div>
                                 <a href="{{url_for('change_form')}}" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-file-user-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">个人中心</h6>
                                       </div>
                                    </div>
                                 </a>
                                 <a href="{{url_for('change_passwd')}}" class="iq-sub-card iq-bg-primary-hover">
                                    <div class="media align-items-center">
                                       <div class="rounded iq-card-icon iq-bg-primary">
                                          <i class="ri-profile-line"></i>
                                       </div>
                                       <div class="media-body ml-3">
                                          <h6 class="mb-0 ">修改密码</h6>
                                       </div>
                                    </div>
                                 </a>


                                 <div class="d-inline-block w-100 text-center p-3">
                                    <a class="bg-primary iq-sign-btn" href="{{ url_for('logout') }}" role="button">退出登录<i class="ri-login-box-line ml-2"></i></a>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </li>
                  </ul>
               </nav>

            </div>
         </div>
             <!-- TOP Nav Bar END -->

             <div class="container">
                 <header>
                     <h1>溯源查询</h1>
                 </header>

                 <div class="input-area">
                     <button id="scan-btn" style="margin: 0 10px;">二维码</button>
                     <input type="text" id="trace-code" placeholder="输入溯源码">
                     <button id="query-btn">查询</button>
                 </div>

                 <div class="result-area" id="result-area" style="display: none;">
                     
                     <!-- 产品基本信息 -->
                     <h3>产品基本信息</h3>
                     <table>
                         <tr>
                             <th>项目</th>
                             <th>详情</th>
                         </tr>
                         <tr>
                             <td>产品名称</td>
                             <td id="product-name"></td>
                         </tr>
                         <tr>
                             <td>唯一溯源码</td>
                             <td id="unique-code"></td>
                         </tr>
                     </table>

                     <!-- 原材料信息 -->
                     <h3>原材料信息</h3>
                     <table>
                         <tr>
                             <th>项目</th>
                             <th>详情</th>
                         </tr>
                         <tr>
                             <td>原材料名称</td>
                             <td id="material-name"></td>
                         </tr>
                         <tr>
                             <td>原材料来源</td>
                             <td id="material-source"></td>
                         </tr>
                         <tr>
                             <td>种子/幼崽来源</td>
                             <td id="seed-source"></td>
                         </tr>
                         <tr>
                             <td>采购时间</td>
                             <td id="purchase-time"></td>
                         </tr>
                         <tr>
                             <td>批次号</td>
                             <td id="batch-number"></td>
                         </tr>
                         <tr>
                             <td>质量检测报告</td>
                             <td id="quality-report"></td>
                         </tr>
                     </table>

                     <!-- 生产加工信息 -->
                     <h3>生产加工信息</h3>
                     <table>
                         <tr>
                             <td>加工时间</td>
                             <td id="process-time"></td>
                         </tr>
                         <tr>
                             <td>加工地点</td>
                             <td id="process-location"></td>
                         </tr>
                         <tr>
                             <td>加工设备</td>
                             <td id="process-equipment"></td>
                         </tr>
                         <tr>
                             <td>操作人员</td>
                             <td id="operator-name"></td>
                         </tr>
                         <tr>
                             <td>加工工艺详情</td>
                             <td id="process-details"></td>
                         </tr>
                     </table>

                     <!-- 运输信息 -->
                     <h3>运输信息</h3>
                     <table id="transport-table">
                         <tr>
                             <th>运输阶段</th>
                             <th>车辆信息</th>
                             <th>运输路线</th>
                             <th>开始时间</th>
                             <th>结束时间</th>
                             <th>温度控制</th>
                         </tr>
                     </table>

                     <!-- 验证记录 -->
                     <h3>验证记录</h3>
                     <table id="verification-table">
                         <tr>
                             <th>验证时间</th>
                             <th>验证结果</th>
                         </tr>
                     </table>
                 </div>
                 <div class="result-area" id="result-area2">
                        <img id="qrcode-image" src="" alt="QR Code">
                    </div>

             </div>
             <footer class="bg-white iq-footer">
                 <div class="container-fluid">
                     <div class="row">
                         <div class="col-lg-6">
                             <ul class="list-inline mb-0">
                                 <li class="list-inline-item"><a href="#">使用帮助</a></li>
                                 <li class="list-inline-item"><a href="#">进入官网</a></li>
                             </ul>
                         </div>
                         <div class="col-lg-6 text-right">
                             Copyright 2024 <a href="">预制菜溯源系统</a> 版权所有
                         </div>
                     </div>
                 </div>
             </footer>
             </div>
      </div>

    <script src="../static/js/jquery.min.js"></script>
      <script src="../static/js/bootstrap.min.js"></script>
      <script src="../static/js/smooth-scrollbar.js"></script>
      <script src="../static/js/custom.js"></script>
      <script src="../static/js/laydate.js"></script>
<!--      <script src="laydate/laydate.js"></script>-->
		<script>
			lay('#version').html('-v'+ laydate.v);
			laydate.render({
				elem: '#date'
			  ,range: true
			  ,theme: '#2c9eae'
			});
         </script>
         <script>
             document.getElementById('query-btn').addEventListener('click', function() {
                const resultArea = document.getElementById('result-area');
               const resultArea2 = document.getElementById('result-area2');
               resultArea.classList.add('show');
               // 隐藏 result-area2
                document.getElementById('result-area2').style.display = 'none';

                 const traceCode = document.getElementById('trace-code').value;
                 if (!traceCode) {
                     alert('请输入溯源码');
                     return;
                 }

                 fetch('/query_trace', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     },
                     body: JSON.stringify({ trace_code: traceCode })
                 })
                 .then(response => response.json())
                 .then(data => {
                     if (data.error) {
                         alert(data.error);
                         return;
                     }

                     // 更新产品基本信息
                     document.getElementById('product-name').textContent = data.product_info.product_name;
                     document.getElementById('unique-code').textContent = traceCode;

                     // 更新原材料信息
                     document.getElementById('material-name').textContent = data.product_info.material_name;
                     document.getElementById('material-source').textContent = data.product_info.source;
                     document.getElementById('seed-source').textContent = data.product_info.seed_or_breed_source || '-';
                     document.getElementById('purchase-time').textContent = data.product_info.purchase_time || '-';
                     document.getElementById('batch-number').textContent = data.product_info.batch_number;
                     document.getElementById('quality-report').textContent = data.product_info.quality_report;

                     // 更新生产信息
                     document.getElementById('process-time').textContent = data.production_info.process_time || '-';
                     document.getElementById('process-location').textContent = data.production_info.process_location || '-';
                     document.getElementById('process-equipment').textContent = data.production_info.process_equipment || '-';
                     document.getElementById('operator-name').textContent = data.production_info.operator_name || '-';
                     document.getElementById('process-details').textContent = data.production_info.process_details || '-';

                     // 更新运输信息表格
                     const transportTable = document.getElementById('transport-table');
                     transportTable.innerHTML = `
                        <tr>
                            <th>阶段</th>
                            <th>车辆信息</th>
                            <th>运输路线</th>
                            <th>开始时间</th>
                            <th>结束时间</th>
                            <th>温度控制</th>
                        </tr>
                        ${data.transport_info.map((t, index) => `
                            <tr>
                                <td>运输阶段${index + 1}</td>
                                <td>${t.vehicle_info || '-'}</td>
                                <td>${t.route || '-'}</td>
                                <td>${t.start_time || '-'}</td>
                                <td>${t.end_time || '-'}</td>
                                <td>${t.temperature_control || '-'}</td>
                            </tr>
                        `).join('')}
                    `;

                     // 更新验证记录
                     const verificationTable = document.getElementById('verification-table');
                     verificationTable.innerHTML = `
                        <tr>
                            <th>验证时间</th>
                            <th>验证结果</th>
                        </tr>
                        ${data.verifications.map(v => `
                            <tr>
                                <td>${v.time || '-'}</td>
                                <td>${v.result || '-'}</td>
                            </tr>
                        `).join('')}
                    `;

                     // 显示结果区域
                     document.getElementById('result-area').style.display = 'block';
                 })
                 .catch(error => {
                     console.error('Error:', error);
                     alert('查询失败，请稍后重试');
                 });
             });

             document.getElementById('view-image-btn').addEventListener('click', function() {
                 alert('查看生产过程影像功能待实现');
             });

             // 添加输入框焦点效果
             const input = document.getElementById('trace-code');
             input.addEventListener('focus', function() {
                 this.parentElement.classList.add('focused');
             });
             input.addEventListener('blur', function() {
                 this.parentElement.classList.remove('focused');
             });
         </script>
     <script>
			lay('#version').html('-v'+ laydate.v);
			laydate.render({
				elem: '#date'
			  ,range: true
			  ,theme: '#2c9eae'
			});
         </script>
          <script>
        document.getElementById('scan-btn').addEventListener('click', function() {

            const resultArea = document.getElementById('result-area2');
            resultArea.style.display = 'block';
               resultArea.classList.add('show');
               // 隐藏 result-area
                document.getElementById('result-area').style.display = 'none';



            const traceCode = document.getElementById('trace-code').value;
            if (!traceCode) {
                alert('请输入溯源码');
                return;
            }

            fetch('/generate_qrcode', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ trace_code: traceCode })
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                    return;
                }
                const qrcodeImage = document.getElementById('qrcode-image');
                qrcodeImage.src = data.qrcode_url;
            })
            .catch(error => {
                console.error('Error:', error);
                alert('查询失败，请稍后重试');
            });
        });
    </script>

   </body>
</html>
